<template>
  <div class="view-container">
    <header-module :left-custom="true" :padding="true">
      <template #left-con>
        <div>
          <span style="font-size: 16px; margin-right: 20px">
            {{ fromData?.distribute?.distributeName }}
          </span>
        </div>
      </template>
      <template #btn>
        <el-button class="border-btn" size="small" @click="handlBack">返回</el-button>
        <el-button
          v-if="fromData.monthlyCheckStatus === '-1' || fromData.monthlyCheckStatus === '-2'"
          type="primary"
          size="mini"
          @click="handlDele(row.id)"
        >删除</el-button>
      </template>
    </header-module>
    <div style="background-color: white;padding-top: 20px" />
    <div class="main-content">
      <div class="list-container">
        <el-form :inline="true" label-position="left" size="small" class="filter-form-inline">
          <el-row :gutter="40">
            <el-col :lg="24">
              <item-title title="基本信息" />
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="配送商名称：">
                {{ fromData?.distribute?.distributeName }}
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="盘点日期：">
                {{ fromData?.checkTime }}
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="创建人：">
                {{ fromData?.creatorName }}
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="创建时间：">
                {{ dateFormat("yyyy-mm-dd HH:MM:SS",fromData?.createdAt) }}
              </el-form-item>
            </el-col>

            <el-col :lg="24">
              <item-title title="盘点产品明细" />
            </el-col>
            <el-col :lg="24">
              <table-view header-cell-class-name="table-header" :data="fromData?.checkProductDetails" border>
                <el-table-column label="序号" type="index" width="50" align="center" />
                <el-table-column label="产品名称" prop="product.productName" align="center" />
                <el-table-column label="通用名" prop="product.productPopularName" align="center" />
                <el-table-column label="批准文号" prop="product.approvalNumber" align="center" />
                <el-table-column label="包装规格" prop="product.packSpecs" align="center" />
                <el-table-column label="库存数量" prop="checkCount" align="center" />
              </table-view>
            </el-col>
          </el-row>
        </el-form>

      </div>
    </div>

  </div>
</template>

<script>
import {getCurrentInstance, inject, onMounted, reactive, toRefs,} from 'vue'
import {useRoute, useRouter} from 'vue-router'

export default {
  name: 'Inventory',
  setup() {
    const router = useRouter()
    const route = useRoute()
    const api = inject('api')
    const currentInstance = getCurrentInstance()
    const data = reactive({
      fromData: {},
    })

    const handlBack = () => {
      router.go(-1)
    }

    const handlDetails = (id) => {
      api.inventory.INVENTORY_DETAILS(id).then((res) => {
        if (res.code === 0) {
          data.fromData = res.data
        }
      })
    }

    const handlDele = () => {
      currentInstance.proxy
        .alertBox({
          message: '删除数据后不可恢复,确定删除？',
        })
        .then(() => {
          api.inventory.INVENTORY_DETELETE(route.query.id).then((res) => {
            if (res.code === 0) {
              handlBack()
            } else {
              currentInstance.proxy.customMessage({
                type: 'error',
                message: res.msg,
              })
            }
          })
        })
        .catch((err) => {
          console.log(err)
        })
    }

    onMounted(() => {
      if (route.query.id) {
        handlDetails(route.query.id)
      }
    })

    return {
      ...toRefs(data),
      handlBack,
      handlDetails,
      handlDele,
    }
  },
}
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
